<template>
	<view>
		<view class="shopping-cart">
			<view class="product-list-item" v-for="(productListItem,index) in productList" :key="productListItem.productId" :class="[ productListItem.isSlide ? 'slide' : 'noslide' ]" @touchstart="touchstart($event,index)" @touchmove="touchmove($event)" @touchend="touchend($event)" @click="goProductDetails(index)">
				<view class="product" v-if="productListItem.invalid != 1">
					<view class="checkbox">
						<label>
							<checkbox class="checkbox-item" :value="productListItem.productName" :name="productListItem.productName" :checked="productListItem.checked" v-model="checkboxValues" @click.stop="checked(index)"/>
						</label>
					</view>
					<image :src="productListItem.productImg"></image>
					<view class="product-description">
						<text class="product-name">{{ productListItem.productName }}</text>
						<text class="product-price">￥{{ productListItem.productPrice }}</text>
						<view class="select">
							<text class="minus" @click.stop="minus(index)">-</text>
							<text class="num">{{ productListItem.orderNum }}</text>
							<text class="add" @click.stop="add(index)">+</text>
						</view>
					</view>
				</view>
				<view v-else class="product invalid">
					<view class="invalid-img">
						<image :src="productListItem.productImg"></image>
						<text>失效</text>
					</view>
					<view class="product-description">
						<text class="product-name">{{ productListItem.productName }}</text>
						<text class="invalid-text">宝贝已经失效，不能购买</text>
					</view>
				</view>
				<view class="delete" @click.stop="deleteItem(index)">
					<view>
						<image class="delete-img" src="../../static/images/delete.png"></image>
						<text class="delete-text">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="select-all" @click="selectAll">
				<checkbox class="checkbox" :checked="checkedAll"></checkbox>
				<text>全选</text>
			</view>
			<view class="total">
				<text class="total-text">合计：</text>
				<text class="money">￥{{ showMoney }}</text>
			</view>
			<view class="accounts" @click="accounts">
				<text class="accounts">去结算</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"shoppingCartProductList",
		props: {
			shoppingCartProductList: Array
		},
		data() {
			return {
				productList: [],
				checkedValues: [],
				checkedAll: false,
				money: 0,
				startX: 0,  //X，Y坐标值
				startY: 0,
				endX: 0,
				endY: 0,
				startDate: 0,  //触屏按下时间戳
				endDate: 0,  //触屏抬起时间戳
				slideState: '',  //滑动状态
				index: null,
				mainImg: null,
				goodName: null,
			}
		},
		watch: {
			shoppingCartProductList: {
				handler() {
					this.productList = JSON.parse(JSON.stringify(this.shoppingCartProductList));
					this.checkedAll = false;
					this.checkedValues = [];
				},
				deep: true 
			}
		},
		mounted(){
			this.productList = JSON.parse(JSON.stringify(this.shoppingCartProductList));
		},
		methods: {
			goProductDetails(index){
				uni.navigateTo({
					url: '../../productDetails/productDetails?id='+this.productList[index].productId
				})
			},
			add(index){
				if(this.productList[index].canClick){
					this.productList[index].canClick = false;
					let self = this;
					uni.request({
						url: this.$store.state.URL+"goods/shopping_cart/shopping_cart",
						data: {
							token: this.$store.state.token,
							goodID: this.productList[index].productId,
							skuID: '',
							num: 1
						},
						success(res) {
							console.log(res.data);
							if(res.data.status){
								self.productList[index].canClick = true;
								console.log("后台增加成功");
								let num = res.data.data.data[index].num;
								self.productList[index].orderNum = num;
								if(!self.productList[index].checked){
									return;
								}else{
									for(let i=0; i<self.checkedValues.length; i++){
										if(self.productList[index].productId == JSON.parse(self.checkedValues[i]).productId){
											let obj = JSON.parse(self.checkedValues[i]);
											obj.orderNum = num;
											self.checkedValues.splice(i,1,JSON.stringify(obj));
											break;
										}
									}
								}
							}
						},
						fail(e){
							console.log(e);
						}
					});
				}

			},
			minus(index){
				if(this.productList[index].orderNum == 1){
					return;
				}else{
					if(this.productList[index].canClick){
						this.productList[index].canClick = false;
						let self = this;
						uni.request({
							url: this.$store.state.URL+"goods/shopping_cart/shopping_cart",
							data: {
								token: this.$store.state.token,
								goodID: this.productList[index].productId,
								skuID: '',
								num: -1
							},
							success(res) {
								console.log(res.data);
								if(res.data.status){
									self.productList[index].canClick = true;
									console.log("后台减少成功");
									let num = res.data.data.data[index].num;
									self.productList[index].orderNum = num;
									if(self.checkedValues.length == 0){
										return
									}else{
										for(let i=0; i<self.checkedValues.length; i++){
											if(self.productList[index].productId == JSON.parse(self.checkedValues[i]).productId){
												let obj = JSON.parse(self.checkedValues[i]);
												obj.orderNum = num;
												self.checkedValues.splice(i,1,JSON.stringify(obj));
												break;
											}
										}
									}
								}
							},
							fail(e){
								console.log(e);
							}
						});
					}
				}
			},
			
			selectAll(){
				if(!this.checkedAll){
                    this.checkedAll = true;
					this.checkedValues = [];
					for(let i=0; i<this.productList.length; i++){
						if(this.productList[i].invalid == 1){
							continue;
						}else{
							this.productList[i].checked = true;
							let obj = {
								productImg: this.productList[i].productImg,
								productId: this.productList[i].productId,
								productName: this.productList[i].productName,
								productNum: this.productList[i].productNum,
								productPrice: this.productList[i].productPrice,
								orderNum: this.productList[i].orderNum
							};
							this.checkedValues.push(JSON.stringify(obj));
						}
					}
				}else{
					this.checkedAll = false;
					for(let i=0; i<this.productList.length; i++){
						this.productList[i].checked = false;
					}
					this.checkedValues = [];
				}
			},
			
			checked(index){
				let obj = {
					productImg: this.productList[index].productImg,
					productId: this.productList[index].productId,
					productName: this.productList[index].productName,
					productPrice: this.productList[index].productPrice,
					orderNum: this.productList[index].orderNum
				};
				if(!this.productList[index].checked){
					this.productList[index].checked = true;
					if(this.checkedValues.includes(JSON.stringify(obj))){
						return;
					}else{
						this.checkedValues.push(JSON.stringify(obj));
					}
				}else{
					this.productList[index].checked = false;
					this.checkedAll = false;
					if(this.checkedValues.includes(JSON.stringify(obj))){
						let index = this.checkedValues.indexOf(JSON.stringify(obj));
						this.checkedValues.splice(index,1);
					}else{
						return;
					}
				}
				let i;
				for(i=0; i<this.productList.length; i++){
					if(this.productList[i].checked || this.productList[i].invalid ==1){
						continue;
					}else{
						break;
					}
				}
				if(i == this.productList.length){
					this.checkedAll = true;
				}
			},
			//去结算
			accounts(){
				if(this.checkedValues.length == 0){
					return;
				}else{
					let order = {
						orderInfo: this.checkedValues,
						money: this.money
					};
					console.log(this.shoppingCartProductList);
					uni.navigateTo({
						url:"../../membershipService/orderConfirm/orderConfirm?orderMessage="+JSON.stringify(order)+"&page=shoppingCar"
					})
				}
			},
			
			touchstart(event,index){
				this.index = index;
				let touch=event.touches[0];
				this.endX=0;
				this.endY=0;
				this.startX=touch.pageX;
				this.startY=touch.pageY;
				this.startDate=+new Date();
			},
			
			touchmove(event){
				let touch=event.touches[0];
				this.endX=touch.pageX;
				this.endY=touch.pageY;
				if(Math.abs(this.endY-this.startY)>Math.abs(this.endX-this.startX)){  //垂直距离大于水平距离
					if(this.slideState==""){  //防止先垂直再水平滑动出现紊乱，只能出现单向滑动
						this.slideState="noSlide";  //禁止左右滑动
					}
				}else{  //同理
					if(this.slideState==""){
						this.slideState="slide";
					}
				}
			},
			
			touchend(event){
				this.endDate=+new Date();
				let timeDifference=this.endDate-this.startDate;  //滑动时间间隔
				let distanceX=this.endX-this.startX;  //滑动距离
				if(this.slideState=="slide"){
					if( (timeDifference<=250&&distanceX>40) || (distanceX>=140) ){  //时间间隔小于250ms且距离大于40 或者距离>140
						this.productList[this.index].isSlide = false;
					}else if( (timeDifference<=250&&distanceX<-40) || (distanceX<=-140) ){
						this.productList[this.index].isSlide = true;
					}
				}
				this.slideState="";  //清空滑动状态
			},
			
			deleteItem(index){
				let self = this;
				let arr = [];
				let obj = {
					goodID: this.productList[index].productId,
					skuID: 0
				};
				arr.push(obj);
				let json = JSON.stringify(arr);
				console.log(json);
				uni.request({
					url: this.$store.state.URL+"goods/shopping_cart/shopping_cart",
					data: {
						token: this.$store.state.token,
						commodity: json,
						isDelete: 1
					},
					success(res) {
						console.log(res.data);
						if(res.data.status){
							for(let i=0; i<self.checkedValues.length; i++){
								if(self.productList[index].productId == JSON.parse(self.checkedValues[i]).productId){
									self.checkedValues.splice(i,1);
									break;
								}
							}
							self.productList[self.index].isSlide = false;
							self.productList.splice(index,1);
							uni.showToast({
								title: '删除成功！',
								duration: 2000
							});
						}
					},
					fail(e){
						console.log(e);
					}
				});
			},
		},
		computed:{
			showMoney(){
				let self = this;
				let money=0;
				for(let i=0; i<this.checkedValues.length; i++){
					money += JSON.parse(this.checkedValues[i]).productPrice*JSON.parse(this.checkedValues[i]).orderNum;
				}
				console.log(this.checkedValues);
				self.money = money;
				return money;
			}
		}
	}
</script>

<style scoped>
	view.invalid{
		width: 710upx;
		box-sizing: border-box;
		padding: 20upx;
	}
	.invalid .invalid-img{
		position: relative;
		width: 200upx;
		height: 150upx;
	}
	.invalid .invalid-img text{
		display: block;
		width: 200upx;
		height: 150upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		opacity: 0.5;
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		line-height: 150upx;
		background-color: #222222;
	}
	.invalid .product-description{
		width: 470upx;
	}
	.invalid .product-description .invalid-text{
		margin-top: 20upx;
		color: #e94d6a;
		font-size: 24upx;
	}
	.slide{
		transform: translateX(-190upx);
		transition: transform 0.15s linear;
	}
	.noslide{
		transform: translateX(0upx);
		transition: transform 0.15s linear;
	}
	.shopping-cart{
		width: 710rpx;
		margin: 0 20upx 0 20upx;
		padding-top: 20upx;
		padding-bottom: 100upx;
		overflow: hidden;
	}
	.product-list-item{
		display: flex;
		width: 890rpx;
		height: 190rpx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}
	.product{
		box-sizing: border-box;
		display: flex;
		width: 710upx;
		height: 190upx;
		padding: 20upx 0;
		padding-right: 20upx;
	}
	.checkbox{
		display: flex;
		box-sizing: border-box;
		width: 70upx;
		height: 150upx;
	}
	.checkbox label{
		display: flex;
		margin: auto;
	}
	.checkbox-item {
		margin: auto;
	}
	.product image{
		display: block;
		width: 200upx;
		height: 150upx;
	}
	.product-description{
		position: relative;
		box-sizing: border-box;
		padding-left: 20upx;
		padding-top: 10upx;
		width: 440upx;
		height: 150upx;
	}
	.product-description>text{
		display: block;
		line-height: 1.5;
	}
	.product-name{
		font-size: 28upx;
		overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
	}
	.product-num{
		font-size: 24upx;
	}
	.product-price{
		color: #e94d6a;
		margin-top: 20upx;
		font-size: 30upx;
	}
	.select{
		position: absolute;
		right: 0;
		top: 110upx;
		width: 160upx;
		height: 40upx;
		box-sizing: border-box;
	}
	.select text{
		position: absolute;
		width: 40upx;
		height: 40upx;
		font-size: 24upx;
		text-align: center;
		line-height: 40upx;
		border-radius: 6upx;
	}
	.select .minus,.select .add{
		font-size: 30upx;
		color: #8d8d8d;
		background-color: #f5f5f5;
	}
	.select .minus{
		left: 0;
	}
	.select .add{
		right: 0;
	}
	.select .num{
		top: 1upx;
		left: 0;
		right: 0;
		margin: auto;
	    width: 36upx;
		height: 36upx;
		line-height: 36upx;
		border: 1upx solid #e94d6a; 
		color: #e94d6a;
	}
	.delete{
		display: flex;
		width: 190upx;
		height: 190upx;
		background-color: #fb5b78;
		box-sizing: border-box;
		border: 1upx solid #f2526f;
		border-radius: 0 10upx 10upx 0;
	}
	.delete view{
		margin: auto;
		height: 60upx;
		text-align: center;
	}
	.delete image{
		display: inline-block;
		margin-right: 10upx;
		width: 40upx;
		height: 46upx;
	}
	.delete text{
		display: inline-block;
		height: 60upx;
		color: #FFFFFF;
		line-height: 60upx;
		font-size: 34upx;
		transform: translateY(-5upx);
	}
	.footer{
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 100upx;
		background-color: #FFFFFF;
		font-size: 30upx;
	}
	.footer view{
		box-sizing: border-box;
	}
	.footer checkbox{
		width: 70upx;
		height: 100upx;
		line-height: 100upx;
	}
	.select-all{
		display: flex;
		width: 200upx;
		box-sizing: border-box;
		padding-left: 30upx;
	}
	.total{
		width: 300upx;
		text-align: right;
		box-sizing: border-box;
		padding-right: 20upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.total-text{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.footer text{
		line-height: 100upx;
	}
	.money{
		color: #e94d6a;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.accounts{
		width: 250upx;
		text-align: center;
		color: #FFFFFF;
		background-color: #fb5b78;
	}
	
</style>